<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">面试跟踪</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div style="float: left;width: 55%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 : </h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                
                <el-select v-model="companyname" placeholder="请选择客户名称" @change="selectname" style="margin-right: 10px;">
                  <el-option v-for="item in customerNames" :key="item.name" :label="item.name"
                             :value="item.name"></el-option>
                </el-select>
                <el-select v-model="num" style="margin-right: 10px;" placeholder="请选择需求编号" @change="selectnum">
                  <el-option v-for="item in numlist" :key="item" :label="item"
                             :value="item"></el-option>
                </el-select>
                <el-select v-model="interviewnum" @change="getdata" placeholder="请选择面试流程">
                  <el-option v-for="item in namelist" :key="item" :label="item"
                             :value="item"></el-option>
                </el-select>
              
              </el-col>
            </el-row>
          
          
          </div>
          <div class="interviewtrack1 right1" style="float: right;">
            <el-input
              v-model.trim="searchword"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="search"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="search"></i>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23" class="posttable2">
          <el-table
            class="resumetable"
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column
              width="100"
              prop="name"
              :label="theadlist.name"
            >
            </el-table-column>
            <el-table-column
              width="100"
              v-if="ifname"
              prop="customerName"
              :label="theadlist.customerName"
            >
            </el-table-column>
            <el-table-column
              width="200"
              prop="postName"
              :label="theadlist.postName">
            </el-table-column>
            <el-table-column
              width="100"
              prop="postLevel"
              :label="theadlist.postLevel">
            </el-table-column>
            <el-table-column
              width="100"
              prop="charger"
              :label="theadlist.pusher">
            </el-table-column>
            <el-table-column
              width="200"
              :label="theadlist.time"
            >
              <template slot-scope="scope">
                <span>{{scope.row.candidateTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="182"
              prop="way"
              :label="theadlist.interviewtype"
            >
            </el-table-column>
            <el-table-column
              prop="detail"
              :label="theadlist.state"
            >
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  
  
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  
  export default {
    name: "interviewtrack",
    data() {
      return {
        companyname: '',
        namelist: [],
        tableData: [],
        interviewnum: '',
        currentPage: 1,
        pagesize: 15,
        currentRow: null,
        totalcount: null,
        theadlist: {
          name: '姓名',
          customerName: '推送客户',
          postName: '推送职位',
          postLevel: '职位级别',
          time: '一面时间',
          pusher: '推送人',
          interviewtype: '面试形式',
          state: '技术面试情况'
        },
        ifname: true,
        customerNames: '',
        num: '',
        numlist: [],
        searchword: '',
        editdialogVisible: false,
        errordialogVisible: false,
        editform: {
          detail: ''
        },
        rules: {
          'detail': [
            {required: true, message: '请输入技术面试情况', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      axios.post(this.url + '/resumeUpload/getCustomerNames').then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      this.getdata();
    },
    methods: {
      //获取面试跟踪的表格数据
      getdata() {
        axios.post(this.url + '/track/getChargerList', {
          state: this.interviewnum,
          customerName: this.companyname,
          no: this.num,
          condition: this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          
          if (res.data.code == 200) {
            if (this.interviewnum == '一面') {
              this.theadlist.time = '一面时间'
            } else if (this.interviewnum == '二面') {
              this.theadlist.time = '二面时间'
            } else if (this.interviewnum == '三面') {
              this.theadlist.time = '三面时间'
            }
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //获取需求编号的下拉框数据
      selectname() {
        this.num = '';
        this.ifname = false;
        this.interviewnum = '';
        this.tableData = [];
        this.totalcount = null;
        this.currentPage = 1;
        axios.post(this.url + '/resumeUpload/getNoByCustomerName', qs.stringify({
          customerName: this.companyname
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.numlist = res.data.data
          }
        })
      },
      //获取面试流程的下拉框数据
      selectnum() {
        this.interviewnum = '';
        this.tableData = [];
        this.totalcount = null;
        this.currentPage = 1;
        axios.post(this.url + '/track/getProcessByNo', {
          no: this.num
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.namelist = res.data.data;
          }
        })
      },
      //搜索功能
      search() {
        this.currentPage = 1;
        this.getdata();
      },
      //改变表格的页面展示数量
      handleSizeChange(val) {
        this.pagesize = val;
        this.getdata();
      },
      //修改当前表格页数
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getdata();
      },
      //点击表格行，获取当前行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
    },
    watch: {
      'searchword': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.getdata();
        }
      }
    }
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  
  .edit {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .edit:focus {
    color: #fff !important;
  }
  
  .hand {
    color: #1099ff;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

</style>
